<template>
    <app style="width: 100%;">
        <div class="headers"></div>
        <el-card class="box-card" v-loading="loading">
            <el-button class="button" v-for="result in subsetDepartments" :key="result" type="info" @click="chiliButtonOnDepartments(result.id,result.name)">{{result.name}}</el-button>
        </el-card>
        <div slot="header" class="clearfix" style="width: 100%">
            <div style="text-align: center;">
                <p style="font-size: 20px">{{addDepartmentName}}</p>
            </div>
            <el-button style="float: right; padding: 3px 0" type="text" @click="goToHomeDepartments">返回</el-button>
            <div style="width: 100%;margin-left: 10px">
                <el-form :inline="true">
                    <el-form-item label="每天用餐时间段:">
                        当日
                        <el-time-select
                                style="width: 100px"
                                placeholder="更新时间"
                                v-model="fromUpdateTime.updateTime"
                                :picker-options="{
                                  start: '00:00',
                                  step: '01:00',
                                  end: '23:00'
                                }"/>
                        <span v-if="fromUpdateTime.updateTime=='00:00'">至当日23:59</span>
                        <span v-if="fromUpdateTime.updateTime!='00:00'">至第二日{{fromUpdateTime.updateTime.slice(0,2)-1}}:59</span>
                    </el-form-item>

                </el-form>
            </div>
            <div >
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="餐补名称"
                    >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="补贴金额">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.subsidyMoney" type="number" placeholder="请输入内容"></el-input>
                        </template>

                    </el-table-column>
                    <el-table-column
                            label="补贴次数">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.numberSubsidies" type="number" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="起始时间"
                            width="250px">
                        <template slot-scope="scope">
                            <el-time-select
                                    placeholder="起始时间"
                                    v-model="scope.row.startime"
                                    :picker-options="{
                                  start: '00:00',
                                  step: '01:00',
                                  end: '23:00'
                                }"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="结束时间"
                            width="250px">
                        <template slot-scope="scope">
                            <el-time-select
                                    placeholder="结束时间"
                                    v-model="scope.row.endtime"
                                    :picker-options="{
                                  start: '00:00',
                                  step: '01:00',
                                  end: '23:00'
                                }"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createtime"
                            label="修改时间">
                    </el-table-column>
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-tooltip content="保存后生效" placement="top">
                                <el-button type="danger" @click="deletes(scope.$index)" plain>删除</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="text-align: center;">
                <el-tooltip content="保存后生效" placement="top">
                    <el-button type="warning" @click="pushTableData">增加</el-button>
                </el-tooltip>
                <el-button @click="saveSubset" type="success">保存</el-button>
            </div>

        </div>
    </app>
</template>

<script>
    export default {
        name: "diningManagement",
        data(){
            return{
                addDepartment:'',
                addDepartmentName:'',
                subsetDepartments:[],
                tableData:[],
                loading:false,
                ruleForm:{
                    name:'',
                    subsidyMoney:'',
                    numberSubsidies:'',
                    startime:'00:00',
                    endtime:'01:00'
                },
                fromUpdateTime:{
                    updateTime:'',
                    departmentsId:''
                }

            }
        },
        methods:{
            chiliButtonOnDepartments(id,departmentName){
                this.addDepartmentName=departmentName;
                this.addDepartment=id;
                this.getQueryingSubsetDepartments(id);
                this.selectDepartmentSubsidy(id);
                this.selectTbDepartmentSubsidyUpdateTime(id)
            },
            getQueryingSubsetDepartments(departmentId){
                this.loading=true;
                this.$api.queryingSubsetApartmentId(departmentId)
                    .then(res=>{
                        if (res.data.length<=0&&res.code===200){
                            this.$message.success('已加载完');
                            this.loading=false;
                        }
                        this.loading=false;
                        this.subsetDepartments=res.data
                    }).catch(err=>{
                    this.loading=false;
                    this.$message.error('网络错误')
                })
            },
            selectDepartmentSubsidy(departmentId){
                this.$api.selectDepartmentSubsidy(departmentId)
                    .then(res=>{
                        this.tableData=res.data
                    })
            },
            goToHomeDepartments(){
                this.chiliButtonOnDepartments(localStorage.getItem('departmentId'),localStorage.getItem('departmentName'));
                this.selectDepartmentSubsidy(localStorage.getItem('departmentId'));
            },
            saveSubset(){
                this.$api.saveSubsidyDepartment(this.addDepartment,this.tableData)
                    .then(res=>{
                        if (res.code===200){
                            this.$message.success(res.message);
                            this.selectDepartmentSubsidy(this.addDepartment);
                        }else {
                            this.$message.error('输入错误，请检查后再试')
                        }

                    });
                this.saveTbDepartmentSubsidyUpdateTime();
            },
            pushTableData(){
                var obj = {};
                obj.question = this.ruleForm;
                this.tableData.push(obj)
            },
            deletes(id){
                this.tableData.splice(id,1)
            },
            selectTbDepartmentSubsidyUpdateTime(departmentId){
                this.$api.selectTbDepartmentSubsidyUpdateTime(departmentId)
                    .then(res=>{
                        this.fromUpdateTime.updateTime=res.data.subsidyUpdateTime;
                    })
            },
            saveTbDepartmentSubsidyUpdateTime(){
                this.fromUpdateTime.departmentsId=this.addDepartment;
                this.$api.saveTbDepartmentSubsidyUpdateTime(this.fromUpdateTime)
                    .then(res=>{

                    })

            }
        },
        mounted() {
            this.chiliButtonOnDepartments(localStorage.getItem('departmentId'),localStorage.getItem('departmentName'));
            this.selectDepartmentSubsidy(localStorage.getItem('departmentId'));
            this.selectTbDepartmentSubsidyUpdateTime(localStorage.getItem('departmentId'));
        }
    }
</script>

<style scoped>
    .headers{
        margin: 10px;
        width: 100%;
    }


    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
    .box-card button{
        margin: 10px;
    }
</style>